import React, {useEffect, useState} from "react";
import {Editor} from 'react-draft-wysiwyg'
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
import {convertToRaw} from 'draft-js'
import draftToHtml from 'draftjs-to-html'
import htmlToDraftjs from 'html-to-draftjs'
import {EditorState, ContentState} from 'draft-js'

function NewsEditor(props) {
    useEffect(() => {
        // console.log(props.content)
        const html = props.content
        // console.log(html)
        if (!html) return;
        const contentBlock = htmlToDraftjs(html)
        console.log(contentBlock)
        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
            const editorState = EditorState.createWithContent(contentState)
            setEditorState(editorState)
        }
    }, [props.content])
    // useEffect(()=>{
    //     console.log(props.content)
    // },[props.content])
    const [editorState, setEditorState] = useState(null)
    // const onEditorStateChange = (editorState)=>{
    //     return setEditorState(editorState)
    // }
    return (
        <div>
            <Editor
                editorState={editorState}
                toolbarClassName={"toolbarClassName"}
                wrapperClassName={"wrapperClassName"}
                editorClassName={"editorClassName"}
                onEditorStateChange={(editorState) => setEditorState(editorState)}
                // onEditorStateChange={()=>onEditorStateChange(editorState)}
                onBlur={() => {
                    // console.log(editorState)
                    // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
                    props.getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))

                }}
            />
        </div>
    )
}

export default NewsEditor
